\documentclass[10pt,letterpaper]{article}
\usepackage[latin1]{inputenc}
\usepackage{amsmath}
\usepackage{amsfonts}
\usepackage{amssymb}
\usepackage{graphicx}
\usepackage{pst-node}           % PSTricks package for nodes
\usepackage{pst-tree}           % PSTricks package for nodes

% This pst example is downloaded from http://www.tug.org/PSTricks/main.cgi?file=pst-tree/pst-tree
\newcommand{\Itemf}[1]{\Tr[ref=l]{% 
    \psframebox[linestyle=solid,fillcolor=cyan!50,fillstyle=solid]{#1}}}
\renewcommand{\psedge}{\ncangle} 

\begin{document}

\title{Project document}
\date{\today{}}
\maketitle{}

\section{The abstract representation of document}

We define some terms that will be helpful in the discussion.
\begin{itemize}
\item The document consists of {\bf elements}. An element can be a letter, a symbol, or more complicated structures containing other elements as children, such as square root and fraction.
\item A {\bf frame} is a section of the document where new elements can be inserted. For example, a math formula in math mode is a frame. The whole document is also a frame. A paragraph can also be considered as a frame.
\item Each frame has an {\bf environment}, which determines which functions are usable in that frame. There are three (maybe more) basic types of environments: a {\bf verbatim environment} contains only characters of a fixed font and fixed size. A {\bf text environment} contains rich text, allowing the user to set font, size and color. A {\bf math environment} contains math formulas, further allowing the user to create math symbols and math structures.
\item Each frame has a {\bf base font}. All characters in the frame has that font.
\item If a {\bf child frame} is create inside a frame, there is an option to modify the base font of the child frame. In most cases, the child has the same environment as its parent, or with slight modification. However, it may have an environment that is independent from its parent.
\end{itemize}

With this framework, most latex functions can be represented by a hierarchy of elements and frames:
\begin{itemize}
\item Each character and math symbol is a single element, containing no children.
\item An overlined or underlined part of the document is an element with exactly one chlld frame. The child frame contains the overlined or underlined text.
\item A square root is also an element with exactly one child frame.
\item A fraction is an element with two child frames. The children may or may not have smaller base font than the parent, depending on the environment.
\item A superscript or subscript is also an element with exactly one child frame, usually with smaller base font.
\end{itemize}

For example, one way to represent the following math formula is given by the following diagram.

\begin{equation*}
\sqrt{x}\frac{\mathfrak{A}}{\overline{z}^2}
\end{equation*}

\psset{xbbd=1.5cm,treemode=R,angleB=180,angleA=-00,levelsep=72pt} 
\pstree{\Itemf{}} { 
    \pstree{\Itemf{Square root}} {
        \pstree{\Itemf{}} {
            \Itemf{x}
        }
    } 
    \pstree{\Itemf{Fraction}} {
        \pstree{\Itemf{}} {
            \pstree{\Itemf{Change font}} {
                \Itemf{A}
            }
        }
        \pstree{\Itemf{}} {
            \pstree{\Itemf{Overline}} {
                \pstree{\Itemf{}} {
                    \Itemf{z}
                }
            }
            \pstree{\Itemf{Superscript}} {
                \pstree{\Itemf{Change size}} {
                    \Itemf{2}
                }
            }
        }
    }
}

\bigskip{}
We divide the text processing procedure into two parts: from keyboard input to abstract document, and from abstract document to display. These two parts are relatively independent, so our implementation of one part should interfere as little as possible with the other part.

\section{From keyboard input to abstract document}

We define a unique {\bf caret} in the document. The position of the caret is a location between two elements in a frame. It can be at the beginning or at the end of the frame. So the number of possible caret locations is $1$ more than the number of elements in that frame.

The next task is to identify the commands in the user input. For example, if the user types in
\begin{verbatim}
\sqrt x \frac{\mathfrak A}{\overline z^2}
\end{verbatim}
we identify the commands ``$\backslash{}$sqrt", ``$\backslash{}$frac", ``$\backslash{}$mathfrak" and ``$\backslash{}$overline". This can be done by entering a {\bf command mode} whenever the user types ``$\backslash{}$", and exiting the command mode when the user indicates that the command is completed.

Then, we can modify the document model according to the type of the input.
\begin{itemize}
\item Left/right arrow: Move caret left/right.
\item Backspace: Delete the element before the caret.
\item A character: Insert the character at the caret, and move the caret after the new character.
\item Enter (in multiline text environment): Divide the current paragraph into two paragraphs.
\item ``$\backslash{}\backslash{}$" (in multiline math or text environment): Line break. {\bf (We may or may not support this function.)}
\item Escape characters, such as ``$\backslash{}$backslash": same as ordinary characters.
\item Math symbols, such as ``$\backslash{}$times": same as ordinary characters.
\item Change of font, such as ``$\backslash{}$mathfrak": Create a new child frame at the caret position with the new base font. Move the caret inside the new frame.
\item Dollar sign (in text environment): Create a new child frame with math environment.
\item \^{}, \_{}: Create a new superscript or subscript element, and a child frame inside that element. The child frame has smaller base font size than its parent.
\item Commands with children, such as ``$\backslash{}$frac": Create a new element for that command, and an appropriate number of child frame inside that element. Move the caret into the first child frame.
\end{itemize}

\bigskip{}
{\large {\bf Potential problems}}
\begin{itemize}
\item Currently we cannot deal with latex commands that requires pairing, such as ``$\backslash{}$left" and ``$\backslash{}$right".
\item Some latex functions need special treatment, and it is hard to adapt those functions into the current framework. For example, a single ` will produce a single `, but two `s together will become ``. Other examples are ``$\backslash{}$choose" and ``$\backslash{}$over".
\end{itemize}

\section{From abstract document to display}

After processing the user input in the abstract level, we need to update the display so that it matches the abstract model. This task can be done by roughly the following procedure:

\begin{itemize}
\item A basic element (characters, math symbols) is displayed by an HTML $<$span$>$ element containing a character or an SVG. The font setting for the $<$span$>$ element can be derived from the base font of its parent frame.
\item A complex element (element with children) is displayed by a $<$span$>$ which contains other $<$span$>$ as children. We need to deal with each type of element on a case-by-case basis.
\item An overline element is a $<$span$>$ containing two children: a $<$span$>$ displaying the line, and a $<$span$>$ displaying its child.
\item A fraction element is a $<$span$>$ containing three children: a $<$span$>$ displaying the first child, a $<$span$>$ displaying the line, and a $<$span$>$ displaying the second child.
\item A superscript is a $<$span$>$ displaying its child.
\end{itemize}

When we produce the HTML elements, we need a way to determine the {\bf size, offset and location of each element}. These three terms are similar but we need to distinguish them carefully:

\begin{itemize}
\item The {\bf size} of an element is its width and height.
\item The {\bf offset} of an element determined where it is positioned relative to a base location. For example, $y$ is positioned lower than $Y$ relative to the base line.
\item The {\bf location} of an element determines where it is positioned inside its parent. For example, the location of the letter a in ``ab" has smaller $x$-coordinate than in ``ba".
\end{itemize}

One way to do this is to enclose the element in an HTML $<$span$>$ element and measure its size by calling suitable javascript functions. However, sometimes this method does not give the correct result. For example, we want the line in $\overline{A}$ to be higher than in $\overline{a}$. Thus, we need to know exactly the height of each letter. The HTML $<$span$>$ element does not suffice because it gives the same height for all letters.

\begin{itemize}
\item The size and offset of a basic element is hard coded. We store data for all character of all fonts with all possible sizes.
\item To determine the size of a complex element, we first do it for all its children. Then, we put the children in suitable locations. This can be done by setting the HTML attributes of the children. The locations of the children depend on the type of the parent element, and may depend on the sizes of other children.
\item Then, the size and offset of the complex element is computed. Usually, it will be the smallest possible size that encloses all its children. For example, the lower bound on the $y$-coordinate of an ordinary frame is the minimum of the bounds of all its children.
\end{itemize}

After doing these steps, the document will be displayed correctly in the browser.

{\bf Note:} Some elements may be built from other elements. For example, a square root may contain a unicode or SVG $\sqrt{}$ character and an overline element. This allows for the possibility for the user to create their own commands, such as ``$\backslash{}$Q" for $\mathbb{Q}$.

\end{document}

The size is required for displaying some element properly. For example, the line in an overline element depends on the size of its child.